<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../../static/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../static/js/jquery.js"></script>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
	<!-- 引入Vue分页 -->
<link rel="stylesheet" href="../../static/vue-pagination/zpageNav.css"/>
<script type="text/javascript" src="../../static/vue-pagination/zpageNav.js"></script>
<style type="text/css">
/*	.rightinfo>div{
		margin-right:5px;
		margin-bottom:5px;
		display:inline-block;
		text-align:center;
		width:130px;
		height:130px;
		color:black;
		font-weight:bolder;
		font-size: 13px;
	}*/
	.kx{ /* 空闲 */
		background:green;
	}
	.kx:hover{ /* 空闲 */
		cursor:pointer;

	}
	.yrz{ /* 已经入住 */
		background:red;
	}
	.ds{
		background:yellow;
	}
	.r_title{
		width: 100px;
		height: 30px;
		padding-left: 50%;
		margin-bottom: 15px;
		margin-top: 10px;
		background-color: #8cd3f1;
		transform: translate(-50%);
	}
</style>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li><a href="#">客房管理</a></li>
    <li><a href="#">客房信息查询</a></li>
  </ul>
</div>
<div class="rightinfo">
	<div class="tools">
		<ul class="toolbar">
			<li class="click"><span><img src="../../static/images/t01.png" /></span>添加</li>
			<li class="click"><span><img src="../../static/images/t02.png" /></span>修改</li>
			<li><span><img src="../../static/images/t03.png" /></span>删除</li>
		</ul>

		<div class="toolbar1">
			<table>
				<form method="get" name="serch">
					<tr>
						<td class="zi"><span>选择分类：</span></td>
						<td><select>
							<option>用户名</option>
						</select></td>
						<td class="zi"><span>关键字：</span></td>
						<td><input type="text" placeholder="与分类关联"/></td>
						<td><input type="submit" value="查询" class="button"/></td>
					</tr>
				</form>
			</table>
		</div>
	</div>
	<table class="tablelist">
		<thead>
		<tr>
			<th>
				<input name="" type="checkbox" value="" checked="checked"/>
			</th>
			<th>序号</th>
			<th>房间号</th>
			<th>价格</th>
			<th>类型</th>
			<th>状态</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="(room,index) in pageInfo.list">
			<td><input name="" type="checkbox" value="" /></td>
			<td>{{index+1}}</td>
			<td>{{room.room_num}}</td>
			<td>{{room.room_price}}</td>
			<td>{{room.room_type_name}}</td>
			<td>{{room.room_status=='0'?'空闲':(room.room_status=='1'?'入住':'打扫')}}</td>
			<td></td>
		</tr>
		</tbody>
	</table>
		<!-- 把分页搞出来 -->
		<zpagenav v-bind:page="pageInfo.page" v-bind:page-size="pageInfo.pageSize" v-bind:total="pageInfo.total"
				  v-bind:max-page="pageInfo.pages"  v-on:pagehandler="findRoomsInfo">
		</zpagenav>
</div>

<script type="text/javascript">
	const vue1 = new Vue({
		el:".rightinfo",
		data:{
			pageInfo:{}
		},
		methods:{
			toInRoom(){
				window.location.href="/pages/bill/checkin.html";
			},
			findRoomsInfo(page){
				this.$http.post('/getRoomInfo.do?pageNum='+page).then(
						function(rs){
							this.pageInfo=rs.body;
						}
				)
			}
		},
		mounted(){
			this.findRoomsInfo(1);
		}
	});
</script>
</body>
</html>
